<style>
    .item1 {
        background: LightSkyBlue;
        grid-area: header;
    }

    .item2 {
        background: LightSalmon;
        grid-area: advert;
    }

    .item3 {
        background: PaleTurquoise;
        grid-area: content;
    }

    .item4 {
        background: lightpink;
        grid-area: footer;
    }

    .container {
        font-size: 1.5em;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px auto 1fr auto;
        grid-gap: 10px;
        grid-template-areas:
            "header"
            "advert"
            "content"
            "footer";
    }

    @media (min-width: 300px) {
        .container {
            grid-template-columns: auto 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "advert header"
                "advert content"
                "advert footer";
        }
    }

    @media (min-width: 400px) {
        .container {
            grid-template-areas:
                /* 当超过 400px 的时候 header 和footer 充满头部和底部 */
                "header header"
                "advert content"
                "footer footer";
        }
    }
</style>

<div class="container">
    <div class="item1">header</div>
    <div class="item2">advert</div>
    <div class="item3">content</div>
    <div class="item4">footer</div>
</div>